<template>
    <view class="content">

        <MsgBox ref="msg1"></MsgBox>

        <view class="background" :style="loadBg">
            <image src="./../../static/login/bg1.jpg" mode="aspectFill" />
        </view>
        <view class="background background2" :style="loadBg2">
            <image src="./../../static/login/bg2.jpg" mode="aspectFill" />
        </view>
        <view class="main">
            <view class="main-title">
                <span class="main-title-1">开启学习之旅</span>
                <span class="main-title-2">昨日渐多，明日愈少，今日还在</span>
            </view>

            <view class="main-form">
                <view class="main-form-input" :style="inputUp">
                    <input ref="username" :placeholder-style="inputPlaceholder" class="uni-input main-form-input-username" placeholder="学号" v-model="loginData.username"  />
                    <input ref="password" :placeholder-style="inputPlaceholder" class="uni-input main-form-input-username" placeholder="密码" v-model="loginData.password" password type="text"
                         @confirm="showInput()"/>
                </view>

                <!-- <button @click="showMsg()">test</button> -->
                <view class="main-form-button" :style="buttonUp">
                    <button class="main-form-button-login" @click="showInput()" type="primary">
                        <span>登录</span>
                    </button>
                </view>

                <view>
                    <span class="main-form-title" :style="titleColor">番茄钟，todolist，课程表</span>
                </view>
            </view>


        </view>
    </view>
</template>

<script>
import MsgBox from '../../components/MsgBox/MsgBox.vue';

export default {
    components: { MsgBox },
    onPullDownRefresh() {
        // uni.startPullDownRefresh();
        //下面是下拉刷新页面的相关代码
        //...
        // setTimeout(()=>{
        //     this.$refs.msg1.showMsg(2,"刷新成功");
        // },1000)
        uni.stopPullDownRefresh();
        this.$refs.msg1.showMsg(2, "刷新成功");
    },
    data() {
        return {
            inputPlaceholder:"color:rgba(0,0,0,0)",
            title: 'Hello',
            isLogin: false,
            inputUp: "",
            buttonUp: "",
            titleColor: "",
            message: {
                show: false,
                data: "登录失败，用户名或密码错误",
                type: 1
            },
            loginData: {
                username: "",
                password: ""
            }
        }
    },
    onShow() {
        uni.hideHomeButton()
    },
    computed: {

        loadBg2() {
            if (this.isLogin) return "opacity:1"
            else return ""
        }
    },
    methods: {
        showInput() {
            console.log("input","111");
            if (this.isLogin == false) {
            console.log("input","false");

                // console.log("refs",this.$refs)

                this.isLogin = true;
                this.inputUp = "pointer-events: auto; opacity: 1;transform: translateY(-40rpx);"
                this.buttonUp = "transform:translateY(20rpx)"
                this.titleColor = "color:white"
                this.inputPlaceholder="color:rgb(1,1,1)"
             } else {
                // console.log(uni.getNetworkType());
            console.log("input","true");
                
                uni.request({
                    url: 'https://tomato.daoxuan.cc/login/',
                    data: {
                        "username": this.loginData.username,
                        "password": this.loginData.password
                    },
                    header: {
                    },
                    method: 'POST',
                    sslVerify: false,
                    success: ({ data, statusCode, header }) => {
                        if (statusCode == 401) {
                            this.$refs.msg1.showMsg(1, "用户名或密码错误")
                        } else if (statusCode == 500) {
                            this.$refs.msg1.showMsg(1, "服务器炸了？")
                        } else if (statusCode == 200) {
                            this.$refs.msg1.showMsg(2, "登录成功！")
                            uni.setStorageSync('login', data)
                            console.log(uni.getStorageSync('login'))
                            uni.redirectTo({ url: 'pages/index/indexPage/indexPage' });
                        } else {
                            this.$refs.msg1.showMsg(1, "联网了么？")
                        }
                    },
                    fail: (error) => {

                    }
                })


            }
        },

    },

}
</script>

<style scoped>
.content {
    width: 100%;
    height: 100vh;
}

.background {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    z-index: -100;
    position: fixed;
}

.background image {
    width: 100%;
    height: 100%;
}

.background2 {
    opacity: 0;
    transition: all 0.3s;
}

.main {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.main-title {
    display: flex;
    align-items: center;
    flex-direction: column;
    font-family: Smiley Sans;
    text-shadow: 0px 3px 0px rgba(229, 229, 229, 0.5);
    color: #fff;
    margin-top: 200rpx;
}

.main-title-1 {
    font-size: 60rpx;
    letter-spacing: 14rpx;
    line-height: 100rpx;
}

.main-title-2 {
    font-size: 30rpx;
}

.main-form {
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.main-form-button-login {
    background-color: #318BF7;
    width: 496rpx;
    height: 80rpx;
    border-radius: 48px;
    font-family: Smiley Sans;
    letter-spacing: 8rpx;
}

.main-form-button {
    transition: all 0.5s;
    transform: translateY(-100rpx);
}

.main-form-title {
    font-family: Smiley Sans;
    color: #318BF7;
    letter-spacing: 5rpx;
    font-size: 20rpx;
    transition: all 0.3s;
}

.main-form-button-login {
    margin-bottom: 200rpx;
    display: flex;
    justify-content: center;
    align-content: center;
}

.main-form-input-username {
    background-color: #fff;
    width: 450rpx;
    height: 80rpx;
    border-radius: 40rpx;
    border: 3px #318BF7 solid;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-bottom: 40rpx;
}

.main-form-input {
    /* visibility:hidden; */
    /* display:  none; */
    opacity: 0;
    /* z-index: -1000; */
    pointer-events: none;
    transition: all 0.5s;
}
</style>
